import React, { useRef, useEffect } from "react";
import {
    Scene, WebGLRenderer, BoxGeometry, MeshNormalMaterial, Mesh,
    Matrix4, Vector3, PerspectiveCamera, Object3DEventMap, Light, DirectionalLight, MeshPhongMaterial, MeshBasicMaterial,
    CircleGeometry, PlaneGeometry, RingGeometry, ShapeGeometry, Shape,
} from 'three';
import "./css/ResponsiveDesign.css"
import Stage from '../component/Stage';

//Canvas自适应


const stage = new Stage();
const { scene, renderer } = stage;




// const geometry = new PlaneGeometry(2, 2, 3, 3);
// const geometry = new CircleGeometry(0.5, 2, Math.PI / 3, Math.PI / 3);
// const geometry = new RingGeometry(0.5, 1.2, 6, 1, Math.PI / 1, Math.PI / 4);

const shape = new Shape();
shape.moveTo(0, 0);
shape.bezierCurveTo(
    1, 1,
    -1, 1,
    0, 0
);
const geometry = new ShapeGeometry(shape, 16);
{
    const material = new MeshNormalMaterial({
        polygonOffset: true,
        polygonOffsetFactor: 1,
        polygonOffsetUnits: 1,
    });
    const mesh = new Mesh(geometry, material);
    scene.add(mesh);
}
{
    const material = new MeshBasicMaterial({
        wireframe: true
    });
    const mesh = new Mesh(geometry, material);
    scene.add(mesh);
}












let isRender: number = 0;
const RenderStructure = () => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const { current } = divRef;
        if (current != null) {
            current.innerHTML = '';
            current.append(stage.renderer.domElement);
        }
        if (isRender == 0)
            stage.animate();
        isRender++;
    }, []);
    return (
        <div ref={divRef}></div>
    );
};

export default RenderStructure;